<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体育赛事选座购票系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1a2a6c, #2a5298);
            color: #fff;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 20px;
        }
        
        .logo {
            font-size: 24px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }
        
        .logo i {
            color: #ff6b6b;
            margin-right: 10px;
        }
        
        .user-area {
            display: flex;
            align-items: center;
        }
        
        .user-btn {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            margin-left: 10px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .user-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .venue-selector {
            display: flex;
            justify-content: center;
            margin: 20px 0;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .venue-card {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 15px;
            width: 220px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s;
            border: 2px solid transparent;
        }
        
        .venue-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
        }
        
        .venue-card.active {
            background: rgba(106, 156, 253, 0.3);
            border-color: #6a9cfd;
        }
        
        .venue-name {
            font-size: 18px;
            font-weight: bold;
            margin: 10px 0;
        }
        
        .venue-location {
            font-size: 14px;
            opacity: 0.8;
            margin-bottom: 5px;
        }
        
        .venue-capacity {
            font-size: 13px;
            background: rgba(0, 0, 0, 0.2);
            padding: 3px 10px;
            border-radius: 20px;
            display: inline-block;
        }
        
        .seat-map-container {
            position: relative;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 15px;
            overflow: hidden;
            height: 600px;
            margin-bottom: 20px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
        }
        
        #seat-map {
            width: 100%;
            height: 100%;
            background: #182340;
            cursor: grab;
        }
        
        .map-controls {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .control-btn {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: none;
            color: white;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        
        .control-btn:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: scale(1.05);
        }
        
        .mini-map {
            position: absolute;
            bottom: 20px;
            right: 20px;
            width: 160px;
            height: 120px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            z-index: 100;
            overflow: hidden;
        }
        
        #mini-map-canvas {
            width: 100%;
            height: 100%;
        }
        
        .view-rect {
            position: absolute;
            border: 2px solid rgba(106, 156, 253, 0.8);
            background: rgba(106, 156, 253, 0.2);
            pointer-events: none;
        }
        
        .info-bar {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            backdrop-filter: blur(10px);
        }
        
        .match-time {
            font-weight: bold;
            font-size: 18px;
            background: rgba(0, 0, 0, 0.2);
            padding: 8px 15px;
            border-radius: 20px;
        }
        
        .area-tags {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .area-tag {
            background: rgba(255, 255, 255, 0.15);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
        }
        
        .area-tag:hover {
            background: rgba(255, 255, 255, 0.25);
        }
        
        .home-area {
            background: rgba(255, 76, 76, 0.25);
        }
        
        .away-area {
            background: rgba(76, 126, 255, 0.25);
        }
        
        .color-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .home-color {
            background: #ff4c4c;
        }
        
        .away-color {
            background: #4c7eff;
        }
        
        .action-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 15px;
            backdrop-filter: blur(10px);
        }
        
        .guide-btn {
            background: rgba(106, 156, 253, 0.3);
            border: none;
            color: white;
            padding: 12px 25px;
            border-radius: 10px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .guide-btn:hover {
            background: rgba(106, 156, 253, 0.5);
        }
        
        .selected-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .selected-text {
            font-size: 16px;
            background: rgba(106, 156, 253, 0.3);
            padding: 8px 15px;
            border-radius: 10px;
        }
        
        .checkout-btn {
            background: linear-gradient(135deg, #ff6b6b, #ff4c4c);
            border: none;
            color: white;
            padding: 12px 35px;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(255, 76, 76, 0.3);
        }
        
        .checkout-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 76, 76, 0.4);
        }
        
        .checkout-btn:disabled {
            background: #555;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .level-indicator {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.5);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 14px;
            z-index: 100;
        }
        
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 200;
        }
        
        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(106, 156, 253, 0.3);
            border-radius: 50%;
            border-top-color: #6a9cfd;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .legend {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.5);
            padding: 12px;
            border-radius: 10px;
            z-index: 100;
            display: flex;
            gap: 15px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
        }
        
        .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 4px;
        }
        
        .available-color {
            background: #4CAF50;
        }
        
        .sold-color {
            background: #9E9E9E;
        }
        
        .locked-color {
            background: #FFC107;
        }
        
        @media (max-width: 768px) {
            .venue-selector {
                flex-direction: column;
                align-items: center;
            }
            
            .venue-card {
                width: 100%;
                max-width: 320px;
            }
            
            .seat-map-container {
                height: 400px;
            }
            
            .area-tags {
                display: none;
            }
            
            .selected-info {
                display: none;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <i class="fas fa-ticket-alt"></i>
                <span>体育之星票务系统</span>
            </div>
            <div class="user-area">
                <button class="user-btn">
                    <i class="fas fa-user"></i> 我的账户
                </button>
                <button class="user-btn">
                    <i class="fas fa-shopping-cart"></i> 我的订单
                </button>
            </div>
        </header>
        
        <div class="venue-selector">
            <div class="venue-card active" data-venue="1">
                <i class="fas fa-stadium fa-2x"></i>
                <div class="venue-name">凯尔特人公园球场</div>
                <div class="venue-location">格拉斯哥, 苏格兰</div>
                <div class="venue-capacity">60,832 座位</div>
            </div>
            <div class="venue-card" data-venue="2">
                <i class="fas fa-stadium fa-2x"></i>
                <div class="venue-name">埃布罗克斯球场</div>
                <div class="venue-location">格拉斯哥, 苏格兰</div>
                <div class="venue-capacity">50,987 座位</div>
            </div>
            <div class="venue-card" data-venue="3">
                <i class="fas fa-stadium fa-2x"></i>
                <div class="venue-name">皮托德里球场</div>
                <div class="venue-location">阿伯丁, 苏格兰</div>
                <div class="venue-capacity">22,199 座位</div>
            </div>
        </div>
        
        <div class="info-bar">
            <div class="match-time">
                <i class="far fa-calendar-alt"></i> 2025-06-28 19:30
            </div>
            <div class="area-tags">
                <div class="area-tag home-area" data-area="north">
                    <div class="color-indicator home-color"></div>
                    北看台球迷区（红·¥180）
                </div>
                <div class="area-tag away-area" data-area="south">
                    <div class="color-indicator away-color"></div>
                    南看台球迷区（蓝·¥150）
                </div>
                <div class="area-tag" data-area="east">
                    <div class="color-indicator" style="background: #9c27b0;"></div>
                    VIP区（紫·¥580）
                </div>
                <div class="area-tag" data-area="west">
                    <div class="color-indicator" style="background: #ff9800;"></div>
                    家庭区（橙·¥280）
                </div>
            </div>
        </div>
        
        <div class="seat-map-container">
            <canvas id="seat-map"></canvas>
            
            <div class="level-indicator">
                <i class="fas fa-layer-group"></i> 场馆视图
            </div>
            
            <div class="map-controls">
                <button class="control-btn" id="zoom-in">
                    <i class="fas fa-plus"></i>
                </button>
                <button class="control-btn" id="zoom-out">
                    <i class="fas fa-minus"></i>
                </button>
                <button class="control-btn" id="reset-view">
                    <i class="fas fa-expand"></i>
                </button>
            </div>
            
            <div class="mini-map">
                <canvas id="mini-map-canvas"></canvas>
                <div class="view-rect"></div>
            </div>
            
            <div class="legend">
                <div class="legend-item">
                    <div class="legend-color available-color"></div>
                    <span>可选</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color sold-color"></div>
                    <span>已售</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color locked-color"></div>
                    <span>锁定</span>
                </div>
            </div>
            
            <div class="loading-overlay">
                <div class="spinner"></div>
            </div>
        </div>
        
        <div class="action-bar">
            <button class="guide-btn" id="show-guide">
                <i class="fas fa-info-circle"></i> 选座指南
            </button>
            
            <div class="selected-info">
                <div class="selected-text">
                    <i class="fas fa-chair"></i> 已选座位: <span id="selected-count">0</span>
                </div>
                <div class="selected-text">
                    <i class="fas fa-tag"></i> 总价: ¥<span id="total-price">0.00</span>
                </div>
            </div>
            
            <button class="checkout-btn" id="checkout-btn" disabled>
                <i class="fas fa-shopping-cart"></i> 去结算
            </button>
        </div>
    </div>

    <script>
        // 模拟场馆数据
        const venues = {
            1: {
                name: "凯尔特人公园球场",
                mapUrl: "https://example.com/map1.svg",
                areas: [
                    { 
                        id: "north", 
                        name: "北看台", 
                        type: "home", 
                        color: "#ff4c4c", 
                        price: 180,
                        seats: 15000, 
                        coordinates: {x: 100, y: 50, width: 300, height: 200},
                        rows: 20,
                        cols: 30
                    },
                    { 
                        id: "south", 
                        name: "南看台", 
                        type: "away", 
                        color: "#4c7eff", 
                        price: 150,
                        seats: 12000, 
                        coordinates: {x: 100, y: 300, width: 300, height: 200},
                        rows: 18,
                        cols: 30
                    },
                    { 
                        id: "east", 
                        name: "东看台", 
                        type: "vip", 
                        color: "#9c27b0", 
                        price: 580,
                        seats: 5000, 
                        coordinates: {x: 450, y: 150, width: 150, height: 400},
                        rows: 25,
                        cols: 12
                    },
                    { 
                        id: "west", 
                        name: "西看台", 
                        type: "family", 
                        color: "#ff9800", 
                        price: 280,
                        seats: 8000, 
                        coordinates: {x: 50, y: 150, width: 150, height: 400},
                        rows: 20,
                        cols: 20
                    }
                ],
                width: 800,
                height: 600
            },
            2: {
                name: "埃布罗克斯球场",
                mapUrl: "https://example.com/map2.svg",
                areas: [
                    // 类似结构的数据
                ],
                width: 750,
                height: 550
            },
            3: {
                name: "皮托德里球场",
                mapUrl: "https://example.com/map3.svg",
                areas: [
                    // 类似结构的数据
                ],
                width: 700,
                height: 500
            }
        };

        // 当前状态
        let currentVenueId = 1;
        let selectedSeats = [];
        let zoomLevel = 1.0;
        let panOffset = { x: 0, y: 0 };
        let viewMode = 'venue'; // 'venue', 'area', 'seat'
        let currentArea = null;
        let isDragging = false;
        let lastMousePos = { x: 0, y: 0 };
        
        // Canvas 对象
        let mainCanvas = null;
        const miniCanvas = document.getElementById('mini-map-canvas');
        const miniCtx = miniCanvas.getContext('2d');
        
        // 初始化Canvas和Fabric.js
        function initCanvas() {
            const container = document.querySelector('.seat-map-container');
            const width = container.clientWidth;
            const height = container.clientHeight;
            
            // 创建Fabric.js画布
            mainCanvas = new fabric.Canvas('seat-map', {
                width: width,
                height: height,
                backgroundColor: '#182340',
                preserveObjectStacking: true,
                selection: false,
                fireRightClick: true
            });
            
            // 设置小地图尺寸
            miniCanvas.width = miniCanvas.parentElement.clientWidth;
            miniCanvas.height = miniCanvas.parentElement.clientHeight;
            
            // 添加事件监听
            setupEventListeners();
            
            // 初始渲染
            renderVenue();
            updateMiniMap();
        }
        
        // 渲染场馆视图
        function renderVenue() {
            if (!mainCanvas) return;
            
            const venue = venues[currentVenueId];
            
            // 清除画布
            mainCanvas.clear();
            mainCanvas.backgroundColor = '#182340';
            
            // 绘制草地
            const pitch = new fabric.Rect({
                left: 150,
                top: 100,
                width: 500,
                height: 350,
                fill: '#2d803d',
                stroke: '#fff',
                strokeWidth: 2,
                selectable: false
            });
            mainCanvas.add(pitch);
            
            // 绘制中圈
            const centerCircle = new fabric.Circle({
                left: 400,
                top: 275,
                radius: 50,
                fill: 'transparent',
                stroke: '#fff',
                strokeWidth: 2,
                selectable: false
            });
            mainCanvas.add(centerCircle);
            
            // 绘制区域
            venue.areas.forEach(area => {
                const { x, y, width, height } = area.coordinates;
                
                const areaRect = new fabric.Rect({
                    left: x,
                    top: y,
                    width: width,
                    height: height,
                    fill: area.color + "80", // 80表示50%透明度
                    stroke: area.color,
                    strokeWidth: 2,
                    selectable: false,
                    hoverCursor: 'pointer',
                    data: { type: 'area', id: area.id }
                });
                
                // 添加区域名称
                const areaText = new fabric.Text(area.name, {
                    left: x + width/2,
                    top: y + height/2,
                    fill: '#fff',
                    fontSize: 18,
                    fontWeight: 'bold',
                    originX: 'center',
                    originY: 'center',
                    selectable: false,
                    data: { type: 'area-label', id: area.id }
                });
                
                mainCanvas.add(areaRect, areaText);
            });
            
            // 如果当前处于区域视图，渲染座位
            if (viewMode === 'area' && currentArea) {
                renderSeats(currentArea);
            }
            
            // 更新视图指示器
            document.querySelector('.level-indicator').innerHTML = 
                `<i class="fas fa-layer-group"></i> ${viewMode === 'venue' ? '场馆视图' : 
                 viewMode === 'area' ? '区域视图：' + currentArea.name : '座位视图'}`;
        }
        
        // 渲染座位
        function renderSeats(area) {
            if (!mainCanvas) return;
            
            const { rows, cols, coordinates } = area;
            const seatSize = 8;
            const padding = 12;
            
            // 计算座位起始位置
            const startX = coordinates.x + 10;
            const startY = coordinates.y + 10;
            
            // 渲染座位
            for (let row = 0; row < rows; row++) {
                for (let col = 0; col < cols; col++) {
                    // 随机座位状态（实际应用中从后端获取）
                    const status = Math.random() > 0.7 ? 'sold' : 'available';
                    
                    const seat = new fabric.Circle({
                        left: startX + col * padding,
                        top: startY + row * padding,
                        radius: seatSize,
                        fill: getSeatColor(status),
                        stroke: '#333',
                        strokeWidth: 0.5,
                        selectable: false,
                        hoverCursor: 'pointer',
                        data: { 
                            type: 'seat', 
                            id: `${area.id}-${row}-${col}`, 
                            status: status,
                            row: row + 1,
                            col: col + 1,
                            price: area.price
                        }
                    });
                    
                    mainCanvas.add(seat);
                }
            }
        }
        
        // 更新小地图
        function updateMiniMap() {
            const venue = venues[currentVenueId];
            const { width, height } = miniCanvas;
            const scale = Math.min(width / venue.width, height / venue.height);
            
            // 清除小地图
            miniCtx.clearRect(0, 0, width, height);
            
            // 绘制小地图背景
            miniCtx.fillStyle = '#0d1b36';
            miniCtx.fillRect(0, 0, width, height);
            
            // 绘制场地
            miniCtx.fillStyle = '#2d803d';
            miniCtx.fillRect(
                150 * scale, 
                100 * scale, 
                500 * scale, 
                350 * scale
            );
            
            // 绘制区域
            venue.areas.forEach(area => {
                const { x, y, width: areaWidth, height: areaHeight } = area.coordinates;
                
                miniCtx.fillStyle = area.color + "80";
                miniCtx.fillRect(
                    x * scale, 
                    y * scale, 
                    areaWidth * scale, 
                    areaHeight * scale
                );
                
                // 绘制区域边框
                miniCtx.strokeStyle = area.color;
                miniCtx.lineWidth = 1;
                miniCtx.strokeRect(
                    x * scale, 
                    y * scale, 
                    areaWidth * scale, 
                    areaHeight * scale
                );
            });
            
            // 更新视图矩形
            updateViewRect();
        }
        
        // 更新主视图在小地图中的位置指示
        function updateViewRect() {
            const viewRect = document.querySelector('.view-rect');
            const venue = venues[currentVenueId];
            const miniMap = document.querySelector('.mini-map');
            
            if (!miniMap || !viewRect) return;
            
            const scale = Math.min(
                miniMap.clientWidth / venue.width, 
                miniMap.clientHeight / venue.height
            );
            
            // 计算视图矩形的位置和尺寸
            const viewWidth = mainCanvas.width / zoomLevel * scale;
            const viewHeight = mainCanvas.height / zoomLevel * scale;
            const viewX = (-panOffset.x / zoomLevel) * scale;
            const viewY = (-panOffset.y / zoomLevel) * scale;
            
            // 更新视图矩形
            viewRect.style.width = `${viewWidth}px`;
            viewRect.style.height = `${viewHeight}px`;
            viewRect.style.left = `${viewX}px`;
            viewRect.style.top = `${viewY}px`;
        }
        
        // 处理缩放
        function handleZoom(delta, centerX, centerY) {
            const scaleFactor = 1.1;
            const newZoom = delta > 0 ? zoomLevel * scaleFactor : zoomLevel / scaleFactor;
            
            // 限制缩放范围
            zoomLevel = Math.max(0.4, Math.min(3, newZoom));
            
            // 设置缩放中心
            mainCanvas.setZoom(zoomLevel);
            
            // 检查是否需要切换视图模式
            checkViewMode();
            
            // 重新渲染
            renderVenue();
            updateMiniMap();
        }
        
        // 检查并更新视图模式
        function checkViewMode() {
            const prevMode = viewMode;
            
            if (zoomLevel >= 2.0) {
                viewMode = 'seat';
            } else if (zoomLevel >= 1.2) {
                viewMode = 'area';
            } else {
                viewMode = 'venue';
            }
            
            // 如果模式变化，更新UI
            if (prevMode !== viewMode) {
                renderVenue();
            }
        }
        
        // 重置视图
        function resetView() {
            zoomLevel = 1.0;
            panOffset = { x: 0, y: 0 };
            viewMode = 'venue';
            currentArea = null;
            mainCanvas.setZoom(1);
            mainCanvas.viewportTransform = [1, 0, 0, 1, 0, 0];
            renderVenue();
            updateMiniMap();
        }
        
        // 区域点击处理
        function focusArea(areaId) {
            const venue = venues[currentVenueId];
            const area = venue.areas.find(a => a.id === areaId);
            
            if (!area) return;
            
            currentArea = area;
            
            // 计算区域中心位置
            const centerX = area.coordinates.x + area.coordinates.width / 2;
            const centerY = area.coordinates.y + area.coordinates.height / 2;
            
            // 设置视图中心
            mainCanvas.setZoom(1.5);
            mainCanvas.absolutePan({
                x: -(centerX * 1.5 - mainCanvas.width / 2),
                y: -(centerY * 1.5 - mainCanvas.height / 2)
            });
            
            zoomLevel = 1.5;
            viewMode = 'area';
            
            // 重新渲染
            renderVenue();
            updateMiniMap();
        }
        
        // 座位点击处理
        function handleSeatClick(seat) {
            if (seat.data.status !== 'available') return;
            
            // 切换座位状态
            const newStatus = seat.data.status === 'available' ? 'locked' : 'available';
            
            // 更新座位状态
            seat.set('fill', getSeatColor(newStatus));
            seat.data.status = newStatus;
            
            // 更新选择状态
            if (newStatus === 'locked') {
                selectedSeats.push({
                    id: seat.data.id,
                    row: seat.data.row,
                    col: seat.data.col,
                    price: seat.data.price
                });
            } else {
                selectedSeats = selectedSeats.filter(s => s.id !== seat.data.id);
            }
            
            // 更新UI
            updateSelectionUI();
            
            // 重新渲染
            mainCanvas.requestRenderAll();
        }
        
        // 更新选择信息UI
        function updateSelectionUI() {
            document.getElementById('selected-count').textContent = selectedSeats.length;
            
            const totalPrice = selectedSeats.reduce((sum, seat) => sum + seat.price, 0);
            document.getElementById('total-price').textContent = totalPrice.toFixed(2);
            
            // 激活/禁用结算按钮
            document.getElementById('checkout-btn').disabled = selectedSeats.length === 0;
        }
        
        // 获取座位颜色
        function getSeatColor(status) {
            switch(status) {
                case 'available': return '#4CAF50';
                case 'locked': return '#FFC107';
                case 'sold': return '#9E9E9E';
                default: return '#4CAF50';
            }
        }
        
        // 初始化事件监听
        function setupEventListeners() {
            // 缩放按钮
            document.getElementById('zoom-in').addEventListener('click', () => {
                handleZoom(1, mainCanvas.width / 2, mainCanvas.height / 2);
            });
            
            document.getElementById('zoom-out').addEventListener('click', () => {
                handleZoom(-1, mainCanvas.width / 2, mainCanvas.height / 2);
            });
            
            document.getElementById('reset-view').addEventListener('click', resetView);
            
            // 鼠标滚轮缩放
            mainCanvas.on('mouse:wheel', (opt) => {
                opt.e.preventDefault();
                handleZoom(opt.e.deltaY, opt.e.offsetX, opt.e.offsetY);
            });
            
            // 拖拽平移
            mainCanvas.on('mouse:down', (opt) => {
                if (opt.target && (opt.target.data?.type === 'seat' || opt.target.data?.type === 'area')) {
                    return; // 不处理座位和区域的拖拽
                }
                
                isDragging = true;
                lastMousePos = { x: opt.e.clientX, y: opt.e.clientY };
                mainCanvas.defaultCursor = 'grabbing';
            });
            
            mainCanvas.on('mouse:move', (opt) => {
                if (!isDragging) return;
                
                const dx = opt.e.clientX - lastMousePos.x;
                const dy = opt.e.clientY - lastMousePos.y;
                
                mainCanvas.relativePan({ x: dx, y: dy });
                lastMousePos = { x: opt.e.clientX, y: opt.e.clientY };
                
                updateViewRect();
            });
            
            mainCanvas.on('mouse:up', () => {
                isDragging = false;
                mainCanvas.defaultCursor = 'grab';
            });
            
            // 区域点击
            mainCanvas.on('mouse:down', (opt) => {
                if (!opt.target || !opt.target.data) return;
                
                if (opt.target.data.type === 'area') {
                    focusArea(opt.target.data.id);
                }
            });
            
            // 座位点击
            mainCanvas.on('mouse:down', (opt) => {
                if (!opt.target || !opt.target.data) return;
                
                if (opt.target.data.type === 'seat') {
                    handleSeatClick(opt.target);
                }
            });
            
            // 区域标签点击
            document.querySelectorAll('.area-tag').forEach(tag => {
                tag.addEventListener('click', () => {
                    const areaId = tag.dataset.area;
                    focusArea(areaId);
                });
            });
            
            // 结算按钮
            document.getElementById('checkout-btn').addEventListener('click', () => {
                if (selectedSeats.length === 0) return;
                
                alert(`您已选择 ${selectedSeats.length} 个座位，总价 ¥${selectedSeats.reduce((sum, seat) => sum + seat.price, 0).toFixed(2)}，即将进入结算页面...`);
                // 实际项目中这里会跳转到订单确认页
            });
            
            // 选座指南
            document.getElementById('show-guide').addEventListener('click', () => {
                alert('选座指南：\n1. 双指缩放或使用按钮缩放查看细节\n2. 点击区域块可快速聚焦到该区域\n3. 放大后点击可选座位进行选择\n4. 座位锁定后需在10分钟内完成支付');
            });
            
            // 场馆选择
            document.querySelectorAll('.venue-card').forEach(card => {
                card.addEventListener('click', () => {
                    document.querySelectorAll('.venue-card').forEach(c => {
                        c.classList.remove('active');
                    });
                    card.classList.add('active');
                    
                    currentVenueId = parseInt(card.dataset.venue);
                    resetView();
                });
            });
        }
        
        // 模拟初始化加载
        function simulateLoading() {
            const overlay = document.querySelector('.loading-overlay');
            overlay.style.display = 'flex';
            
            setTimeout(() => {
                overlay.style.display = 'none';
            }, 1500);
        }
        
        // 初始化
        window.addEventListener('load', () => {
            initCanvas();
            simulateLoading();
        });
    </script>
</body>
</html>